<template>
    <div>
        <div class="buttonGroup">
            <el-button

                    icon="el-icon-arrow-left"
                    round
                    @click="handleBackGoodsList"
                    type="primary">
                返回商品列表
            </el-button>
        </div>

        <div class="tableClass" >
            <el-table @selection-change="handleSelectionChange" :data="list" border style="width: 1400px">
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="company" label="厂家名称" width="180" align="center">
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="400" align="center">
                </el-table-column>
                <el-table-column prop="sku_value" label="商品规格" width="400" align="center">
                </el-table-column>
                <el-table-column prop="quantity" label="购买数量" width="100" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">

                        <el-button
                                @click="handleUpdateQuantity(scope.row)"
                                size="mini"
                                type="primary"
                                icon="el-icon-edit">
                            修改数量
                        </el-button>

                        <el-button
                                @click="handelDeleteShoppingCar(scope.row.id)"
                                size="mini"
                                type="danger"
                                icon="el-icon-delete">
                            移除购物车
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="settlement">
            <el-button @click="goodsBuy" v-if="goodsBuyVisible" type="primary">购买</el-button>
        </div>

        <el-dialog title="修改购买数量" :visible.sync="updateQuantityVisible">
            <el-form :model="updateData">
                <el-form-item label="购买数量">
                    <el-input style="width: 150px" v-model="updateData.quantity" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateQuantityVisible = false">取 消</el-button>
                <el-button type="primary" @click="UpdateQuantity">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: 'factoryShoppingCar',
        data() {
            return {
                list: [],
                loading: false,
                updateData: {
                    id: '',
                    quantity: ''
                },
                updateQuantityVisible: false,
                tableSelectData: [],
                goodsBuyVisible: false
            }
        },

        methods: {

            //初始化数据
            defaultData(page) {
                this.loading = true;
                this.$http.get('/agent/turnover/cart/list', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        page: page,
                        id: this.$route.query.agent_id,
                        mill_id: this.$route.query.mill_id,
                    }
                }).then((response => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list;
                    }
                    this.loading = false
                })).catch((error => {
                    console.log(error);
                    this.loading = false;
                }))
            },

            //返回厂家商品列表
            handleBackGoodsList() {
                this.$router.push({
                    name: 'factoryGoodsList',
                    query: {
                        p_id: this.$route.query.p_id,
                        mill_id: this.$route.query.mill_id,
                    }
                })
            },

            //移除购物车
            handelDeleteShoppingCar(id){
                this.loading = true;
                this.$confirm('是否将该商品移除购物车, 是否继续?', '移除购物车', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/agent/turnover/cart/del',{
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then((response => {
                        if (response.data.status === 'success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultData()
                        }
                        this.loading = false;
                    })).catch((error => {
                        console.log(error);
                        this.loading = false;
                    }))

                });
            },


            handleUpdateQuantity(value){
                this.updateData.id = value.id;
                this.updateData.quantity = value.quantity;
                this.updateQuantityVisible = true;
            },

            //修改购买数量
            UpdateQuantity(){
                this.loading = true;
                this.$http.post('/agent/turnover/cart/update',{
                    token: localStorage.getItem('user_token'),
                    id: this.updateData.id,
                    quantity: this.updateData.quantity
                }).then((response => {
                    if (response.data.status === 'success'){
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });

                        this.defaultData();
                    }
                    this.updateQuantityVisible = false;
                    this.loading = false;
                })).catch((error => {
                    console.log(error);
                    this.updateQuantityVisible = false;
                    this.loading = false;
                }));
            },

            goodsBuy(){
                this.loading = true;
                this.$http.post('/agent/turnover/add',{
                    token: localStorage.getItem('user_token'),
                    cart_data: JSON.stringify(this.tableSelectData)
                }).then((response => {
                    if (response.data.status === 'success'){
                        this.$message({
                            type: 'success',
                            message: '购买成功，请等待发货!'
                        });

                        this.defaultData();
                    }
                    this.loading = false;
                })).catch((error => {
                    console.log(error);
                    this.loading = false;
                }));
            },

            handleSelectionChange(value){
                if (value.length > 0){
                    this.goodsBuyVisible = true;
                }else{
                    this.goodsBuyVisible = false;
                }
                this.tableSelectData = value;
            }
        },

        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .tableClass {
        margin-top: 24px;
        margin-left: 130px;
    }

    .buttonGroup {
        margin-top: 24px;

    }

    .buttonGroup button {
        margin-left: 130px;
    }

    .settlement{
        float: right;
        margin-top: 24px;
    }

    .settlement button{
        margin-right: 220px;
    }
</style>